<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge"/>
    <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>文件上传</title>
    <link rel="stylesheet" href="css/element/index.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <link rel="stylesheet" href="css/fileUpload.css"/>
</head>
<body>
<div id="app">
    <div class="register-wrap">
        <div class="register-main">
            <el-card shadow="hover" class="r-title">
                <h1>文件上传</h1>
            </el-card>
            <div class="r-body">
                <el-button type="info" @click="wordDown" size="small">模板文件下载</el-button>
              <br/>
                <el-row>
                    <el-button type="primary" @click="wordBtn" size="small">文件上传</el-button>
                </el-row>
                <!-- 注册结果-->
                <h3>上传结果</h3>
                <template>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="code"
                                label="接口编码"
                                width="200">
                        </el-table-column>
                        <el-table-column
                                prop="bizCode"
                                label="是否注册成功（1成功，2失败）"
                                width="250">
                        </el-table-column>
                        <el-table-column
                                prop="bizDesc"
                                label="返回信息">
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <!-- 上传word对话框-->
            <el-dialog
                    title="上传文件"
                    :visible.sync="dialogVisible"
                    width="30%">
                <el-upload
                        class="upload"
                        ref="my-word"
                        drag
                        limit = "1"
                        action="/file/upload"
                        :show-file-list="showFile"
                        :before-upload="beforeWordUpload"
                        :on-success="handleWordSuccess"
                        :auto-upload="false">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传doc/docx文件</div>
                </el-upload>
                <span slot="footer" class="dialog-footer">
                <el-button @click="clearFiles">重新上传</el-button>
                <el-button @click="recallWord">取 消</el-button>
                <el-button type="primary" @click="uploadWord">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/element.js"></script>
<script src="js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                dialogVisible: false,
                dialogVisible1: false,
                dialogVisible2: false,
                dialogVisible3: false,
                showFile: true,
                showFile1: true,
                showFile2: true,
                showFile3: true,
                tableData: []
            }
        },
        methods: {
            // 上传word按钮
            wordBtn() {
                const self = this
                self.dialogVisible = true
                self.showFile = true
            },
            /**
             * 点击重新上传
             *  */
            //word窗口
            clearFiles () {
                this.$refs['my-word'].clearFiles();
            },
           /**
            * 点击取消
            *  */
            recallWord(){
                const self = this
                self.showFile = false
                self.dialogVisible = false
                self.clearFiles();
            },
            /**
             * 点击确定
             */
            // word文件转换
            uploadWord() {
                this.$refs['my-word'].submit();
                const self = this
                self.showFile = false
                self.dialogVisible = false
            },
            /**
             * 上传word之前，判断文件格式与文件大下
             */
            beforeWordUpload(file) {
                let extName = file.name.substring(file.name.lastIndexOf('.')).toLowerCase()
                let AllUpExt = '.doc|.docx|'
                const isLt2M = file.size / 1024 / 1024 < 50;
                if (AllUpExt.indexOf(extName + '|') === -1) {
                    this.$message.error('文件格式不正确!')
                    return false
                }
                if (!isLt2M) {
                    this.$message.error('上传文件大小不能超过50MB!')
                    return false
                }
                return extName && isLt2M;
            },
            // word转excel提示信息
            handleWordSuccess(res) {
                if (res.code !== 200) {
                    alert("错误---》"+res.msg)
                } else {
                    alert("上传成功------》"+res.msg)
                }
                location.reload()
            },
            // 上传按钮
            wordDown() {
                window.location.assign("file/downloadFile");
            }
        }
    })
</script>
</body>
</html>